<template>
    <template v-for="(item, index) in props.menuList" :key="item.menuId">
      <ElSubMenu :popper-offset="15" v-if="item.list?.length > 0" :index="'name'+item.menuId">
        <template #title>
          <ElIcon><component :is="getIcon(item.icon)"/></ElIcon>
          <span>{{item.name}}</span>
        </template>
        <Menu :menuList="item.list"/>
      </ElSubMenu>
      <ElMenuItem v-else :index="'name'+item.menuId" :route="{name: 'name+'+item.menuId}">
        <ElIcon><component :is="getIcon(item.icon)"/></ElIcon>
        <span>{{item.name}}</span>
      </ElMenuItem>
    </template>
</template>
<script>
export default {
  name: "Menu"
}
</script>
<script setup>
import { ElMenu, ElSubMenu, ElMenuItem, ElIcon } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
const props = defineProps(["menuList"])

const route = useRoute()
const router = useRouter()
const getIcon = (icon) => {
    return icon.charAt(0).toLocaleUpperCase() + icon.substring(1)
}
</script>